<template>
    <!-- 卡片交易汇总查询 -->
    <div class="cardTransactionUmmary" v-loading="pageLoading">
        <cardComponent pageTitle="查询服务类-->卡片交易汇总查询">
            <template slot="cardBody">
                <el-form
                    :model="searchFormOne"
                    size="small"
                    label-width="40%"
                    :rules="rules"
                    ref="formValid"
                >
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="卡号:" label-position="left" prop="CARDNO" clearable>
                                <el-select placeholder="请选择" v-model="searchFormOne.carNo">
                                    <el-option
                                        v-for="item in CARDNO"
                                        :key="item.CARDNBR"
                                        :label="item.CARDNBR"
                                        :value="item.CARDNBR"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                label="本外币选项:"
                                label-position="left"
                                prop="currencyOption"
                            >
                                <el-select placeholder="请选择" v-model="searchFormOne.currencyOption">
                                    <el-option
                                        v-for="item in formSelect"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="起始日期:" label-position="left" prop="startDate">
                                <el-date-picker
                                    v-model="searchFormOne.startDate"
                                    type="month"
                                    placeholder="请选择起始日期"
                                    value-format="yyyyMM"
                                    format="yyyy-MM"
                                    :picker-options="startOptions"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="结束日期:" label-position="left" prop="endDate">
                                <el-date-picker
                                    v-model="searchFormOne.endDate"
                                    type="month"
                                    placeholder="请选择结束日期"
                                    value-format="yyyyMM"
                                    format="yyyy-MM"
                                    :picker-options="endtOptions"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-button
                                type="primary"
                                size="small"
                                @click="hanleSrue"
                                class="srue"
                            >确认</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                icon="el-icon-refresh-right"
                                @click="restInfo"
                            >重置</el-button>
                        </el-col>
                    </el-row>
                </el-form>
                <div v-if="visible">
                    <div class="historyQuery mainTitle">历史交易汇总信息</div>
                    <!-- <el-row>
                        <el-col :span="12" class="mainCols">
                            非低扣率
                        </el-col>
                        <el-col :span="12" class="mainColss">
                            低扣率
                        </el-col>
                    </el-row>-->
                    <el-row>
                        <el-col :span="24" class="mainCols">非低扣率</el-col>
                        <el-col :span="24" class>
                            <el-table
                                :data="tableData"
                                width="100%"
                                border
                                class="tableMain heard-bg"
                            >
                                <el-table-column label="账单月份" prop="MONTH"></el-table-column>

                                <el-table-column label="本币消费金额" prop="PURAMT">
                                    <template slot-scope="scoped">
                                        <span>{{ scoped.row.PURAMT.toFixed(2)}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="本币消费次数" prop="PURCNT"></el-table-column>

                                <el-table-column label="本币取现金额" prop="CAAMT">
                                    <template slot-scope="scoped">
                                        <span>{{ scoped.row.CAAMT.toFixed(2)}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="本币取现次数" prop="CACNT"></el-table-column>

                                <el-table-column label="外币消费金额" prop="PURAMTX">
                                    <template slot-scope="scoped">
                                        <span>{{ scoped.row.PURAMTX.toFixed(2)}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="外币消费次数" prop="PURCNTX"></el-table-column>

                                <el-table-column label="外币取现金额" prop="CAAMTX">
                                    <template slot-scope="scoped">
                                        <span>{{ scoped.row.CAAMTX.toFixed(2)}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="外币取现次数" prop="CACNTX"></el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24" class="mainCols">低扣率</el-col>
                        <el-col :span="24" class>
                            <el-table
                                :data="tableData"
                                width="100%"
                                border
                                class="tableMain heard-bg"
                            >
                                <el-table-column label="本币消费金额" prop="LPURAMT">
                                    <template slot-scope="scoped">
                                        <span>{{ scoped.row.LPURAMT.toFixed(2)}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="本币消费次数" prop="LPURCNT"></el-table-column>

                                <el-table-column label="本币取现金额" prop="LCAAMT">
                                    <template slot-scope="scoped">
                                        <span>{{ scoped.row.LCAAMT.toFixed(2)}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="本币取现次数" prop="LCACNT"></el-table-column>

                                <el-table-column label="外币消费金额" prop="LPURAMTX">
                                    <template slot-scope="scoped">
                                        <span>{{ scoped.row.LPURAMTX.toFixed(2)}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="外币消费次数" prop="LPURCNTX"></el-table-column>

                                <el-table-column label="外币取现金额" prop="LCAAMTX">
                                    <template slot-scope="scoped">
                                        <span>{{ scoped.row.LCAAMTX.toFixed(2)}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="外币取现次数" prop="LCACNTX"></el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                    <el-card class="box-card">
                        <div class="infoList">
                            <el-row>
                                <el-col :span="24" class="mainTitle">交易汇总信息</el-col>
                            </el-row>
                            <el-row class="mainRow">
                                <el-col :span="12">
                                    <span class="infoColLeft">本币消费次数（非低扣率）:</span>
                                    {{ tabulateDataArr.PURCNT }}
                                </el-col>
                                <el-col :span="12">
                                    <span class="infoColLeft">本币消费金额（非低扣率）:</span>
                                    {{ tabulateDataArr.PURAMT.toFixed(2) }}
                                </el-col>
                            </el-row>
                            <el-row class="mainRow">
                                <el-col :span="12">
                                    <span class="infoColLeft">外币消费次数（非低扣率）:</span>
                                    {{ tabulateDataArr.PURCNTX }}
                                </el-col>
                                <el-col :span="12">
                                    <span class="infoColLeft">外币消费金额（非低扣率）:</span>
                                    {{ tabulateDataArr.PURAMTX.toFixed(2) }}
                                </el-col>
                            </el-row>
                            <el-row class="mainRow">
                                <el-col :span="12">
                                    <span class="infoColLeft">本币消费次数（低扣率）:</span>
                                    {{ tabulateDataArr.LPURCNT }}
                                </el-col>
                                <el-col :span="12">
                                    <span class="infoColLeft">本币消费金额（低扣率）:</span>
                                    {{ tabulateDataArr.LPURAMT.toFixed(2) }}
                                </el-col>
                            </el-row>
                            <el-row class="mainRow">
                                <el-col :span="12">
                                    <span class="infoColLeft">外币消费次数（低扣率）:</span>
                                    {{ tabulateDataArr.LPURCNTX }}
                                </el-col>
                                <el-col :span="12">
                                    <span class="infoColLeft">外币消费金额（低扣率）:</span>
                                    {{ tabulateDataArr.LPURAMTX.toFixed(2)}}
                                </el-col>
                            </el-row>
                            <el-row class="mainRow">
                                <el-col :span="12" class="mainCol">
                                    <span class="infoColLeft red">免收下年年费:</span>
                                    {{ tabulateDataArr.FEETYPE }}
                                </el-col>
                            </el-row>
                        </div>
                    </el-card>
                    <div class="footer">
                        <el-button
                            type="primary"
                            size="small"
                            @click="handleChangePage('pre')"
                            :disabled="currentApprefIndex <= 0"
                        >上一页</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            @click="handleChangePage('next')"
                            :disabled="!nextButtonFlag"
                        >下一页</el-button>
                    </div>
                </div>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import moment from 'moment';
import { mapState } from 'vuex';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import { getToken, getTokenHsbankNo } from '@/utils/auth';

export default {
    name: 'cardTransactionUmmary',
    components: {
        cardComponent,
    },
    data() {
        return {
            searchFormOne: {
                carNo: '', // 卡号
                cardId: '', // 证件号
                startDate: '',
                endDate: '',
                currencyOption: '', // 货币种选择
            },
            CARDNO: [], // 卡号下拉
            pageLoading: false, // 页面loading
            apprefList: [], // 分期付款申请编号(只存每页最后一条记录)
            currentApprefIndex: '', // 当前页最后一条记录的申请编号的索引
            nextButtonFlag: false, // ‘下一页’  按钮的显示控制阀
            // 表单下拉
            formSelect: [
                {
                    label: '所有币种',
                    value: 'A',
                },
                {
                    label: '美元',
                    value: 'I',
                },
                {
                    label: '人民币',
                    value: 'L',
                },
            ],
            tableData: [],
            aftotamt: '', // "年费调整累计交易笔数"
            aftotcnt: '', // "年费调整累计交易金额"
            ret: '', // "人民币美元汇率"
            // 汇总数据
            tabulateDataArr: {
                PURCNT: 0,
                PURAMT: 0,
                PURCNTX: 0,
                PURAMTX: 0,
                LPURCNT: 0,
                LPURAMT: 0,
                LPURCNTX: 0,
                LPURAMTX: 0,
                FEETYPE: '',
            },

            visible: false,
            rules: { // 表单校验规则
                startDate: [
                    { required: true, message: '请选择起始日期', trigger: 'blur' },
                ],
                endDate: [
                    { required: true, message: '请选择结束日期', trigger: 'blur' },
                ],
                currencyOption: [
                    { required: true, message: '请选择货币', trigger: 'blur' },
                ],
            },
            startOptions: { // 开始日期选择 限制
                disabledDate: (time) => {
                    if (this.searchFormOne.endDate) {
                        return time.getTime() > new Date(moment(this.searchFormOne.endDate).format('YYYY-MM')).getTime();
                    }
                },
            },
            endtOptions: { // 结束日期选择限制
                disabledDate: (time) => {
                    if (this.searchFormOne.startDate) {
                        return time.getTime() < new Date(moment(this.searchFormOne.startDate).format('YYYY-MM')).getTime();
                    }
                },
            },

        };
    },
    filters: {

    },
    mounted() {
        this.CARDNO = this.cardList_3601;
        this.CARDNO.forEach((item) => {
            if (item.CARDNBR.trim() === this.cardInfo_3004.CARDNO.trim()) {
                this.searchFormOne.carNo = item.CARDNBR;
            }
        });
        this.searchFormOne.currencyOption = 'A';
        this.tabulateData();
    },
    computed: mapState({
        cardList_3601: state => state.common.cardList_3601,
        cardInfo_3004: state => state.common.cardInfo_3004,
        defaultParams: state => state.common.defaultParams,
        pinFlag: state => state.common.pinFlag, // 是否密码检查标志

    }),
    methods: {
        // 点击确认进行查询
        hanleSrue() {
            this.tabulateDataArr.PURCNT = 0;
            this.tabulateDataArr.PURAMT = 0;
            this.tabulateDataArr.PURCNTX = 0;
            this.tabulateDataArr.PURAMTX = 0;
            this.tabulateDataArr.LPURCNT = 0;
            this.tabulateDataArr.LPURAMT = 0;
            this.tabulateDataArr.LPURCNTX = 0;
            this.tabulateDataArr.LPURAMTX = 0;
            this.apprefList = [];
            this.$refs.formValid.validate((valid) => {
                if (valid) {
                    this.pageLoading = true;
                    this.currentApprefIndex = 0;
                    this.dialogTable();
                } else {

                }
            });
        },
        // 3099交易对接
        dialogTable() {
            const appBody = {
                CARDNBR: this.searchFormOne.carNo.trim() || '', // 卡号
                PINFLAG: this.pinFlag, // 是否检查密码标志
                PIN: '12345678', // 密码
                BEGINMTH: this.searchFormOne.startDate, // 起始账单月份
                ENDMTH: this.searchFormOne.endDate, // 终止账单月份
                RTNIND: this.apprefList.length === 0 ? '' : 1, // 翻页标志 首次传空， 翻页传1
                TRNMTH: this.apprefList.length === 0 ? '' : this.apprefList[this.currentApprefIndex],
                // CARDNBR: this.searchFormOne.carNo.trim() || '', // 卡号
                // PINFLAG: this.pinFlag, // 是否检查密码标志
                // PIN: '', // 密码
                // BEGINMTH: '201701', //起始账单月份
                // ENDMTH: '202701',//终止账单月份
                // RTNIND: '', // 翻页标志 首次传空， 翻页传1
                // TRNMTH: '000000',
            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '3099';
            defaultParams.body.appBody = appBody;
            // 3099交易
            this.$post.common.transPort(defaultParams).then((res) => {
                this.pageLoading = false;
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, 2222);
                    if (result.sysHead.rspCd === '000000') {
                        this.visible = true;
                        this.tableData = result.body.appBody.dataList || [];
                        this.tableComputed();
                        const currentAppref = result.body.appBody.dataList[result.body.appBody.dataList.length - 1].MONTH;
                        // console.log(result.body.appBody.dataList, 'result.body.appBody.dataList')
                        // console.log(currentAppref, 'currentAppref')
                        this.nextButtonFlag = !(result.body.appBody.dataList.length < 12);
                        if (!this.apprefList.includes(currentAppref)) {
                            this.apprefList.push(currentAppref);
                            // 保存 当前页最后一条记录的申请编号的索引
                            this.currentApprefIndex = this.apprefList.length - 1;
                        } else { // 已存在
                            this.apprefList.forEach((item, index) => {
                                if (item === currentAppref) {
                                    this.visible = true;
                                    this.currentApprefIndex = index;
                                }
                            });
                        }
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(
                            errorMsg,
                            '提示',
                            {
                                customClass: 'error', type: 'error',
                            },
                        );
                    }
                } else {
                    this.$alert(
                        '请求失败！',
                        '提示',
                        {
                            customClass: 'error', type: 'error',
                        },
                    );
                }
            });
        },
        // 汇总查询信息
        async tabulateData() {
            // let this.aftotamt, //"年费调整累计交易笔数"
            //     this.aftotcnt, //"年费调整累计交易金额"
            //     this.ret //"人民币美元汇率"
            const params_9031 = {
                cfgNo: '9031',
                bankNum: getTokenHsbankNo('HsbankNo'),
                sect: '0000',
            };
            await this.$post.dictDetail.queryConfig(params_9031).then((res) => {
                // console.log(res,'9031')
                if (res.status === 200) {
                    this.aftotamt = res.data.content.cfgEdit;
                }
            });
            const params_9032 = {
                cfgNo: '9032',
                bankNum: getTokenHsbankNo('HsbankNo'),
                sect: '0000',
            };
            await this.$post.dictDetail.queryConfig(params_9032).then((res) => {
                // console.log(res,'9032')
                if (res.status === 200) {
                    this.aftotcnt = res.data.content.cfgEdit;
                }
            });
            const params_9046 = {
                cfgNo: '9046',
                bankNum: getTokenHsbankNo('HsbankNo'),
                sect: '0000',
            };
            await this.$post.dictDetail.queryConfig(params_9046).then((res) => {
                // console.log(res,'9046')
                if (res.status === 200) {
                    this.ret = res.data.content.cfgEdit;
                }
            });
            // console.log(this.aftotamt)
            // console.log(this.aftotcnt)
            // console.log(this.ret)
        },
        tableComputed() {
            let CNTSum; // 年费累计交易笔数,
            let AMTSum; // 年费累计金额
            let feeType;// 年费类型
            this.tableData.forEach((item) => {
                // console.log(item)
                this.tabulateDataArr.PURCNT += Number(item.PURCNT);
                this.tabulateDataArr.PURAMT += Number(item.PURAMT);
                this.tabulateDataArr.PURCNTX += Number(item.PURCNTX);
                this.tabulateDataArr.PURAMTX += Number(item.PURAMTX);
                this.tabulateDataArr.LPURCNT += Number(item.LPURCNT);
                this.tabulateDataArr.LPURAMT += Number(item.LPURAMT);
                this.tabulateDataArr.LPURCNTX += Number(item.LPURCNTX);
                this.tabulateDataArr.LPURAMTX += Number(item.LPURAMTX);
            });
            CNTSum = Number(this.tabulateDataArr.PURCNT) + Number(this.tabulateDataArr.PURCNTX) + Number(this.tabulateDataArr.LPURCNT) + Number(this.tabulateDataArr.LPURCNTX);
            AMTSum = Number(this.tabulateDataArr.PURAMT) + Number(this.tabulateDataArr.LPURAMT) + Number(this.tabulateDataArr.PURAMTX) * parseInt(this.ret) + Number(this.tabulateDataArr.LPURAMTX) * parseInt(this.ret);
            // console.log(CNTSum)
            // console.log(AMTSum)
            feeType = this.cardInfo_3004.FEECODE;
            if (CNTSum >= this.aftotcnt || AMTSum > this.aftotamt || feeType === 'F') {
                this.tabulateDataArr.FEETYPE = '是';
            } else {
                this.tabulateDataArr.FEETYPE = '否';
            }
        },
        // 上下页切换
        handleChangePage(type) {
            if (type === 'pre') { // 切换到上一页
                if (this.currentApprefIndex - 2 < 0) {
                    this.apprefList = []; // 清空缓存 申请编号 -> 相当于首次查询
                } else {
                    this.currentApprefIndex = this.currentApprefIndex - 2;
                }
                this.dialogTable();
            } else { // 切换到下一页
                this.dialogTable();
            }
        },
        // 重置按钮，重置
        restInfo() {
            this.searchFormOne.startDate = '';
            this.searchFormOne.endDate = '';
            this.CARDNO.forEach((item) => {
                if (item.CARDNBR.trim() === this.cardInfo_3004.CARDNO.trim()) {
                    this.searchFormOne.carNo = item.CARDNBR;
                }
            });
            this.searchFormOne.currencyOption = 'A';
            this.visible = false;
            this.tableData = [];
            this.apprefList = [];
        },

    },
};
</script>

<style lang='scss' scoped>
.cardTransactionUmmary {
    width: 98%;
    min-height: 100%;
    background: #fff;
    // padding:10px;
    box-sizing: border-box;
    border-radius: 5px;
    .el-form-item__content {
        width: 220px;
    }
    .el-select,
    .el-date-editor {
        width: 100%;
    }
    /* //头部内容 */
    .tab-header {
        width: 100%;
        text-align: left;
        span {
            font-size: 14px;
        }
        .headerTitle {
            font-size: 16px;
            margin: 10px 0px;
            color: skyblue;
        }
        .el-form-item__content {
            text-align: left;
        }
    }
    .tableMain {
        max-width: 100% !important;
    }
    .mainTitle {
        background: #409eff;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #fff;
        margin: 15px 0;
        font-weight: 600;
        font-size: 17px;
    }
    .mainCols {
        border: 1px solid #eee;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #111;
        font-size: 14px;
        font-weight: 600;
        // width: 51.3%;
    }
    .footer {
        margin-top: 10px;
        text-align: right;
    }
    .mainRow {
        margin-top: 10px;
    }
    .red {
        color: red;
        text-align: center;
    }
    .srue {
        margin-left: 30px;
    }
    .box-card {
        margin-top: 20px;
    }
}
</style>
